"use client"

import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"
import {Button} from "@/components/ui/button";
import {CirclePlus} from "lucide-react";
import {useEffect, useState} from "react";
import request from "@/lib/request";
import Link from "next/link";
import {Badge} from "@/components/ui/badge";
import {useRouter} from "next/navigation";
import {
    AlertDialog, AlertDialogAction, AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription, AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger
} from "@/components/ui/alert-dialog";
import moment from "moment";

interface invoicesType extends ApiResponse {
    data: {
        id: string;
        name: string;
        description: string;
        projectName: string;
        status: 0 | 1;
        creator: string;
        createTime: string;
        modifiedTime: string;
    }[] | []
}

export default function Project() {
    const router = useRouter();
    const [invoices, setInvoices] = useState([] as {
        id: string;
        name: string;
        description: string;
        projectName: string;
        status: 0 | 1;
        creator: string;
        createTime: string;
        modifiedTime: string;
    }[] | []);
    useEffect(() => {
        request("/api/project/get", {
            method: "GET",
            headers: {
                "Content-Type": "application/json",
            }
        }).then((res: invoicesType) => {
            if (res.success) {
                setInvoices(res.data);
            }
        })

    }, [])

    return (
        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
            <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min p-5">
                <div className="flex justify-end">
                    <Button variant="link" size="sm"><CirclePlus/>新建项目</Button>
                </div>
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead className="w-[100px]">项目编号</TableHead>
                            <TableHead>项目名称</TableHead>
                            <TableHead>描述</TableHead>
                            <TableHead>状态</TableHead>
                            <TableHead>创建人</TableHead>
                            <TableHead>创建时间</TableHead>
                            <TableHead>修改时间</TableHead>
                            <TableHead>操作</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {invoices.map((invoice) => (
                            <TableRow key={invoice.id}>
                                <TableCell>{invoice.id.substring(0, 2) + '****' + invoice.id.substring(invoice.id.length - 4, invoice.id.length)}</TableCell>
                                <TableCell>
                                    <Link href={`/design/${invoice.id}`}
                                          className="text-blue-600 underline-offset-4 hover:underline">{invoice.projectName}</Link>
                                </TableCell>
                                <TableCell>{invoice.description}</TableCell>
                                <TableCell>
                                    {
                                        invoice.status == 0 ? <Badge>停用</Badge> : invoice.status == 1 ?
                                            <Badge variant="secondary">启用</Badge> : "-"
                                    }
                                </TableCell>
                                <TableCell>{invoice.creator}</TableCell>
                                <TableCell>{moment(invoice.createTime).format("YYYY-MM-DD HH:mm:ss")}</TableCell>
                                <TableCell>{moment(invoice.modifiedTime).format("YYYY-MM-DD HH:mm:ss")}</TableCell>
                                <TableCell>
                                    <Button variant="link" className="text-blue-600" onClick={()=>{
                                        router.push(`/design/${invoice.id}`)
                                    }}>编辑</Button>
                                    <AlertDialog>
                                        <AlertDialogTrigger
                                            className="underline-offset-4 hover:underline h-9 px-4 py-2 text-red-600">
                                            删除
                                        </AlertDialogTrigger>
                                        <AlertDialogContent>
                                            <AlertDialogHeader>
                                                <AlertDialogTitle>确认删除？</AlertDialogTitle>
                                                <AlertDialogDescription>
                                                    是否确认删除项目【{invoice.projectName}】
                                                </AlertDialogDescription>
                                            </AlertDialogHeader>
                                            <AlertDialogFooter>
                                                <AlertDialogCancel>关闭</AlertDialogCancel>
                                                <AlertDialogAction>确认</AlertDialogAction>
                                            </AlertDialogFooter>
                                        </AlertDialogContent>
                                    </AlertDialog>
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>


            </div>
        </div>
    )
}